<template>
    <div class="chat-container">
        <div class="chat-header">
            <div class="customer-info">
                <el-avatar :src="currentCustomer.avatar" size="medium"></el-avatar>
                <div class="info-text">
                    <span class="name">{{ currentCustomer.name }}</span>
                    <span class="status" :class="currentCustomer.status">
                        {{ currentCustomer.status === 'online' ? '在线' : '离线' }}
                    </span>
                </div>
            </div>
            <div class="header-actions">
                <el-button icon="el-icon-user" circle></el-button>
                <el-button icon="el-icon-close" circle></el-button>
            </div>
        </div>

        <el-scrollbar class="message-container" ref="scrollbar">
            <div class="messages">
                <div v-for="(message, index) in messages" :key="index" :class="['message', message.sender]">
                    <div class="message-content">
                        {{ message.content }}
                    </div>
                    <div class="message-time">
                        {{ message.time }}
                    </div>
                </div>
            </div>
        </el-scrollbar>

        <div class="input-area">
            <el-input type="textarea" :rows="3" placeholder="请输入消息内容" v-model="inputMessage"
                @keyup.enter.native="sendMessage"></el-input>
            <div class="input-actions">
                <el-button-group>
                    <el-button icon="el-icon-picture"></el-button>
                    <el-button icon="el-icon-folder"></el-button>
                </el-button-group>
                <el-button type="primary" @click="sendMessage" :disabled="!inputMessage.trim()">
                    发送
                </el-button>
            </div>
        </div>
    </div>
</template>

<script>
export default {
  name: 'ChatWindow',
  props: {
    currentCustomer: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      inputMessage: '',
      // 将消息数据改为根据客户ID存储
      allMessages: {
        1: [
          {
            content: '您好，我想咨询产品问题',
            sender: 'customer',
            time: '10:30'
          },
          {
            content: '您好，很高兴为您服务，请问有什么可以帮助您的？',
            sender: 'agent',
            time: '10:32'
          },
          {
            content: '我想了解一下你们的产品A的具体功能',
            sender: 'customer',
            time: '10:33'
          }
        ],
        2: [
          {
            content: '订单什么时候发货？',
            sender: 'customer',
            time: '09:15'
          },
          {
            content: '您的订单已经处理，预计明天发货',
            sender: 'agent',
            time: '09:20'
          }
        ],
        3: [
          {
            content: '谢谢你们的帮助！',
            sender: 'customer',
            time: '14:45'
          }
        ]
      }
    }
  },
  computed: {
    messages() {
      return this.allMessages[this.currentCustomer.id] || []
    }
  },
  watch: {
    currentCustomer() {
      this.scrollToBottom()
    }
  },
  mounted() {
    this.scrollToBottom()
  },
  methods: {
    sendMessage() {
      if (!this.inputMessage.trim()) return
      
      const newMessage = {
        content: this.inputMessage,
        sender: 'agent',
        time: new Date().toLocaleTimeString([], {hour: '2-digit', minute:'2-digit'})
      }
      
      // 确保消息数组存在
      if (!this.allMessages[this.currentCustomer.id]) {
        this.$set(this.allMessages, this.currentCustomer.id, [])
      }
      
      this.allMessages[this.currentCustomer.id].push(newMessage)
      this.inputMessage = ''
      this.$nextTick(() => {
        this.scrollToBottom()
      })
    },
    scrollToBottom() {
      this.$refs.scrollbar?.wrap?.scrollTo({
        top: this.$refs.scrollbar.wrap.scrollHeight,
        behavior: 'smooth'
      })
    }
  }
}
</script>

<style scoped>
.chat-container {
    height: 100%;
    display: flex;
    flex-direction: column;
    background-color: #fff;
    border-radius: 4px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.chat-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
    border-bottom: 1px solid #ebeef5;
}

.customer-info {
    display: flex;
    align-items: center;
}

.info-text {
    display: flex;
    flex-direction: column;
    margin-left: 10px;
}

.info-text .name {
    font-size: 16px;
    font-weight: bold;
}

.info-text .status {
    font-size: 12px;
    color: #909399;
}

.info-text .status.online {
    color: #67c23a;
}

.header-actions .el-button {
    padding: 8px;
    margin-left: 5px;
}

.message-container {
    flex: 1;
    padding: 15px;
    overflow: auto;
}

.messages {
    min-height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.message {
    max-width: 70%;
    margin-bottom: 15px;
    display: flex;
    flex-direction: column;
}

.message.customer {
    align-self: flex-start;
}

.message.agent {
    align-self: flex-end;
}

.message-content {
    padding: 10px 15px;
    border-radius: 4px;
    position: relative;
    word-break: break-word;
}

.message.customer .message-content {
    background-color: #f2f6fc;
    color: #333;
}

.message.agent .message-content {
    background-color: #409eff;
    color: #fff;
}

.message-time {
    font-size: 12px;
    color: #909399;
    margin-top: 5px;
}

.message.customer .message-time {
    text-align: left;
}

.message.agent .message-time {
    text-align: right;
}

.input-area {
    border-top: 1px solid #ebeef5;
    padding: 15px;
}

.input-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 10px;
}
</style>